<template>
	<!--积分明细页面 -->
	<view class="content display  width-100 displayColumn">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23" @click="back"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">积分明细</text>
			</template>
		</u-navbar>
		<!-- 列表 -->
		<view class="fn_list display  all_item displayColumn width-100">
			<view class="fn_list_all display  width_699 displayColumn">
				<view class="fn_item_title display  width_699 M-T30">
					<span class="fontSize font_comm  height_100" @click="selectTime">{{time}}月</span>
					<uni-icons type="right" class="height_100" color="#232323" size="20"></uni-icons>
				</view>
				<!-- 列表 -->
				<scroll-view id="ceshi" scroll-y="true" class="scroll-Y " :style="{height: scrollHeight,marginTop:'20rpx'}" @scrolltolower="scrolltolower">
					<view class="fn_item_card display  width_699 all_item displayColumn">
						
						<view class="card display  width_699 M-T20 displaycenter_jus displayColumn M-T20" v-for="(item,index) in arr" :key="index" @click="todetails(item.id)">
							<view class="card_one display  width-100  displaycenter_aliem">
								<view class="left display">
									<span class="fontSize font_comm ttx1 M-L24">{{item.operationType==9?'积分收入':'积分兑换洗车券'}}</span>
								</view>
								<view class="right display  displaycenter_aliem">
									<span class="fontSize font_comm   txt2" v-if="item.inExType==0">+{{item.integralNum}}</span>
									<span class="fontSize font_comm   txt21" v-else>-{{item.integralNum}}</span>
									<uni-icons type="right" class=" M-R24"  color="#232323" size="15"></uni-icons>
								</view>
							</view>
							<view class="card_two display width_699 displaycenter_aliem M-T12">
								<span class="fontSize font_comm txt3 M-L24">{{item.createTime}}</span>
							</view>
						</view>
						
					</view>
					
				</scroll-view>
				
			</view>
		</view>
		<!-- 时间选择器 -->
		<u-datetime-picker ref="datetimePicker" :show="show" v-model="value1" mode="year-month" :minDate="1587524800000"
			:maxDate="1786778555000" defaultIndex='[0,0]' @confirm="confirm" @cancel="cancle"></u-datetime-picker>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNum:1,
				time:'2024-10',
				show:false,
				value1:'',
				scrollHeight:'90vh',
				flag:true,//true为+ false为-
				arr:[
					
					]
			}
		},
		onLoad() {
			this.getList()
		},
		onReady() {
		      const that = this
		      this.$nextTick(() => {
		        uni.getSystemInfo({
		          success: function (res) {
		            const query = wx.createSelectorQuery()
		            query.select('#ceshi').boundingClientRect()
		            // 获取滚动容器css数据
		            query.exec((resData) => {
						console.log(resData)
		              if (resData && resData.length) {
		                // 容器高度 = 可使用窗口高度 - 滚动容器距离顶部位置
		                that.scrollHeight = (res.windowHeight - resData[0].top)*2 - 30 + 'rpx'
						console.log(that.scrollHeight)
		              }
		            })
		          },
		        })
		      })
			},
		methods: {
			// 触底加载
			scrolltolower(){
				if(this.total==this.arr.length){
					return false
				}
				this.pageNum++;
				this.getList()
			},
			getList(){
				let data = {
					userId:uni.getStorageSync('userInfo').user.userId,
					pageSize:10,
					pageNum:this.pageNum
				}
				this.$req.get('/xcx/userWalletIntegralLog/list',data).then(res=>{
					console.log(res)
					if(res.data.code==200){
						
						this.arr = this.arr.concat(res.data.rows);
						this.total = res.data.total
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			},
			// 跳转积分详情
			todetails(e){
				this.$tab.navigateTo(`/packageC/pointsDetails/pointsDetails?id=${e}`)
			},
			// 选择时间
			selectTime() {
				this.show = true;
			},
			confirm(e){
				console.log(e)
				this.time = uni.$u.date(e.value, 'yyyy-mm')
				this.show = false;
			},
			cancle(){
				this.show = false;
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				// if (type === 'day') {
				// 	return `${value}日`
				// }
				return value
			},
		}
	}
</script>

<style scoped lang="scss">
.fn_list_all{
	
}
.title{
	font-weight: 600;
	font-size: 34rpx;
	color: #232323;
}
.fn_item_title{
	align-items: center;
	span{
		font-weight: 600;
		font-size: 32rpx;
		color: #000000;
	}
}
.card{
	height: 134rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.card_one{
	justify-content: space-between;
}
.ttx1{
	font-weight: 600;
	font-size: 28rpx;
	color: #000000;
}
.txt2{
	font-weight: 600;
	font-size: 28rpx;
	color: #126BC9;
}
.txt21{
	font-weight: 600;
	font-size: 28rpx;
	color: #FF672D;
}
.txt3{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
</style>
